<template>
  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
    <div
      style="display: flex;justify-content: center;margin: 0 auto;margin-top: 200px"
      class="max-w-1500 min-w-345  rounded-20 bg-white bg-opacity-60 card-shadow"
    >
      <div hidden  md:block style="width:500px;height: 500px">
        <n-image width="500" height="500" :src="login1" preview-disabled/>
      </div>
      <div w-320 flex-col px-20 py-35>
        <div style="text-align: center;position: relative;">
          <n-image  :src="logo2" preview-disabled   class="loading1"/>
          <n-image width="200" :src="logo1" preview-disabled  />
        </div> 
        <div mt-30>
          <n-input
            v-model:value="loginInfo.username"
            autofocus
            class="h-50 items-center pl-10 text-16"
            placeholder="请输入账号"
            :maxlength="20"
          />
        </div>
        <div mt-30>
          <n-input
            v-model:value="loginInfo.password"
            class="h-50 items-center pl-10 text-16"
            type="password"
            show-password-on="mousedown"
            placeholder="请输入密码"
            :maxlength="20"
            @keypress.enter="handleLogin"
          />
        </div>

        <div mt-20>
          <n-button
            h-50
            w-full
            rounded-5
            text-16
            type="primary"
            :loading="loading"
            @click="handleLogin"
          >
            {{ $t('views.login.text_login') }}
          </n-button>
        </div>
      </div>
    </div>
    <div style="width:100%;height: 100px;text-align: center;margin: 20px">版权所有 Copyright(©)2025 泊时衰老健康管理中心</div>
  </AppPage>
</template>

<script setup>
import { lStorage, setToken } from '@/utils'
import bgImg from '@/assets/images/login_bg.png'
import login1 from '@/assets/images/login1.png'
import api from '@/api'
import { addDynamicRoutes } from '@/router'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const { query } = useRoute()
const { t } = useI18n({ useScope: 'global' })
const title = import.meta.env.VITE_TITLE
import logo1 from '@/assets/images/loading1.png'
import logo2 from '@/assets/images/loading2.png'

const loginInfo = ref({
  username: '',
  password: '',
})

initLoginInfo()

function initLoginInfo() {
  const localLoginInfo = lStorage.get('loginInfo')
  if (localLoginInfo) {
    loginInfo.value.username = localLoginInfo.username || ''
    loginInfo.value.password = localLoginInfo.password || ''
  }
}

const loading = ref(false)
async function handleLogin() {
  const { username, password } = loginInfo.value
  if (!username || !password) {
    $message.warning(t('views.login.message_input_username_password'))
    return
  }
  try {
    loading.value = true
    $message.loading("登录中,请稍后...")
    const res = await api.login({ username, password: password.toString() })
    $message.success(t('views.login.message_login_success'))
    setToken(res.data.access_token)
    await addDynamicRoutes()
    if (query.redirect) {
      const path = query.redirect
      console.log('path', { path, query })
      Reflect.deleteProperty(query, 'redirect')
      router.push({ path, query })
    } else {
      console.log('跳转首页')
      router.push('/')
    }
  } catch (e) {
    console.error('login error', e.error)
  }
  loading.value = false
}
</script>

<style>
        .loading1 {
          width: 80px;
          height: 80px;
          margin-left: 70px;
          /* 先执行一次上升动画，然后执行浮动动画 */
          animation: 
          riseUp2 1.5s forwards,
          float2 1s 1.5s infinite ease;
      }
      
      /* 上升动画（只执行一次） */
      @keyframes riseUp2 {
          from { transform: translateY(20px); }
          to { transform: translateY(25px); }
      }
      
      /* 浮动动画（循环执行） */
      @keyframes float2 {
          0%, 100% { transform: translateY(25px); }
          50% { transform: translateY(20px); }
      }
    </style>
